<template>
  <div>
    <span>test</span>
    <!--    <TableTree
            :origin-data="originData"
            :table-columns="tableColumns"
            show-checkbox
        />-->
    <span>test</span>
    <TableTree
      :origin-data="permissionList"
      :table-columns="myColumns"
      show-checkbox
      @permissions="(val) => getPermission(val)"
    />
    <el-button @click="test">submit</el-button>
  </div>
</template>

<script>
import TableTree from "@/TableTree/index.vue";

export default {
  name: "roleView",
  components: {
    TableTree,
  },
  data() {
    return {
      originData: [],
      tableColumns: [],
      myColumns: [],
      myData: [],
      permissionList: [],
      permissionIds: [],
      ids: [],
    };
  },
  created() {
    this.tableColumns = [
      [
        {
          id: "head1",
          nodeName: "表头1",
          rowSpan: 2,
          colSpan: 1,
        },
        {
          id: "head2",
          nodeName: "表头2",
          rowSpan: 2,
          colSpan: 1,
        },
        {
          id: "head3",
          nodeName: "表头3",
          rowSpan: 1,
          colSpan: 4,
        },
      ],
      [
        {
          id: "head4",
          nodeName: "表头4",
          rowSpan: 1,
          colSpan: 1,
        },
        {
          id: "head5",
          nodeName: "表头5",
          rowSpan: 1,
          colSpan: 3,
        },
      ],
    ];
    this.originData = [
      {
        id: "body1",
        nodeLevel: 1,
        nodeName: "节点1",
        step: 1,
        parentId: [],
        isChecked: false,
        editable: false,
        chidrenList: [
          {
            id: "body1-1",
            nodeLevel: 2,
            nodeName: "节点1-1",
            step: 1,
            parentId: "body1",
            isChecked: false,
            editable: false,
            chidrenList: [
              {
                id: "body1-1-1",
                nodeLevel: 3,
                nodeName: "节点1-1-1",
                step: 1,
                parentId: "body1-1",
                isChecked: false,
                editable: false,
                chidrenList: [
                  {
                    id: "body1-1-1-1",
                    nodeLevel: 4,
                    nodeName: "节点1-1-1-1",
                    step: 1,
                    parentId: "body1-1-1",
                    isChecked: false,
                    editable: false,
                    chidrenList: [
                      {
                        id: "body1-1-1-1-1",
                        nodeLevel: 5,
                        nodeName: "节点1-1-1-1-1",
                        step: 1,
                        parentId: "body1-1-1-1",
                        isChecked: false,
                        editable: false,
                        chidrenList: [
                          {
                            id: "body1-1-1-1-1-1",
                            nodeLevel: 6,
                            nodeName: "节点1-1-1-1-1-1",
                            step: 1,
                            parentId: "body1-1-1-1-1",
                            isChecked: false,
                            editable: false,
                            chidrenList: [],
                          },
                          {
                            id: "body1-1-1-1-1-2",
                            nodeLevel: 6,
                            nodeName: "节点1-1-1-1-1-2",
                            step: 1,
                            parentId: "body1-1-1-1-1",
                            isChecked: false,
                            editable: false,
                            chidrenList: [],
                          },
                        ],
                      },
                    ],
                  },
                  {
                    id: "body1-1-1-2",
                    nodeLevel: 4,
                    nodeName: "节点1-1-1-2",
                    step: 1,
                    parentId: "body1-1-1",
                    isChecked: false,
                    editable: false,
                    chidrenList: [],
                  },
                  {
                    id: "body1-1-1-3",
                    nodeLevel: 4,
                    nodeName: "节点1-1-1-3",
                    step: 1,
                    parentId: "body1-1-1",
                    isChecked: false,
                    editable: false,
                    chidrenList: [
                      {
                        id: "body1-1-1-3-1",
                        nodeLevel: 5,
                        nodeName: "节点1-1-1-3-1",
                        step: 1,
                        parentId: "body1-1-1-3",
                        isChecked: false,
                        editable: false,
                        chidrenList: [],
                      },
                      {
                        id: "body1-1-1-3-2",
                        nodeLevel: 5,
                        nodeName: "节点1-1-1-3-2",
                        step: 2,
                        parentId: "body1-1-1-3",
                        isChecked: false,
                        editable: false,
                        chidrenList: [],
                      },
                    ],
                  },
                ],
              },
              {
                id: "body1-1-2",
                nodeLevel: 3,
                nodeName: "节点1-1-2",
                step: 1,
                parentId: "body1-1",
                isChecked: false,
                editable: false,
                chidrenList: [
                  {
                    id: "body1-1-2-1",
                    nodeLevel: 4,
                    nodeName: "节点1-1-2-1",
                    step: 1,
                    parentId: "body1-1-2",
                    isChecked: false,
                    editable: false,
                    chidrenList: [
                      {
                        id: "body1-1-2-1-1",
                        nodeLevel: 5,
                        nodeName: "节点1-1-2-1-1",
                        step: 1,
                        parentId: "body1-1-2-1",
                        isChecked: false,
                        editable: false,
                        chidrenList: [
                          {
                            id: "body1-1-2-1-1-1",
                            nodeLevel: 6,
                            nodeName: "节点1-1-2-1-1-1",
                            step: 1,
                            parentId: "body1-1-2-1-1",
                            isChecked: false,
                            editable: false,
                            chidrenList: [],
                          },
                          {
                            id: "body1-1-2-1-1-2",
                            nodeLevel: 6,
                            nodeName: "节点1-1-2-1-1-2",
                            step: 1,
                            parentId: "body1-1-2-1-1",
                            isChecked: false,
                            editable: false,
                            chidrenList: [],
                          },
                        ],
                      },
                    ],
                  },
                ],
              },
            ],
          },
        ],
      },
      {
        id: "body2",
        nodeLevel: 1,
        nodeName: "节点2",
        step: 1,
        parentId: [],
        isChecked: false,
        editable: false,
        chidrenList: [
          {
            id: "body2-1",
            nodeLevel: 2,
            nodeName: "节点2-1",
            step: 1,
            parentId: "body2",
            isChecked: false,
            editable: false,
            chidrenList: [
              {
                id: "body2-1-1",
                nodeLevel: 3,
                nodeName: "节点2-1-1",
                step: 1,
                parentId: "body2-1",
                isChecked: false,
                editable: false,
                chidrenList: [],
              },
              {
                id: "body2-1-2",
                nodeLevel: 3,
                nodeName: "节点2-1-2",
                step: 1,
                parentId: "body2-1",
                isChecked: false,
                editable: false,
                chidrenList: [
                  {
                    id: "body2-1-2-1",
                    nodeLevel: 4,
                    nodeName: "节点2-1-2-1",
                    step: 1,
                    parentId: "body2-1-2",
                    isChecked: false,
                    editable: false,
                    chidrenList: [
                      {
                        id: "body2-1-2-1-1",
                        nodeLevel: 5,
                        nodeName: "节点2-1-2-1-1",
                        step: 1,
                        parentId: "body2-1-2-1",
                        isChecked: false,
                        editable: false,
                        chidrenList: [
                          {
                            id: "body2-1-2-1-1-1",
                            nodeLevel: 6,
                            nodeName: "节点2-1-2-1-1-1",
                            step: 1,
                            parentId: "body2-1-2-1-1",
                            isChecked: false,
                            editable: false,
                            chidrenList: [],
                          },
                        ],
                      },
                    ],
                  },
                ],
              },
            ],
          },
        ],
      },
      {
        id: "body3",
        nodeLevel: 1,
        nodeName: "节点3",
        step: 1,
        parentId: [],
        isChecked: false,
        editable: false,
        chidrenList: [],
      },
      {
        id: "body4",
        nodeLevel: 1,
        nodeName: "节点4",
        step: 1,
        parentId: [],
        isChecked: false,
        editable: false,
        chidrenList: [
          {
            id: "body4-1",
            nodeLevel: 2,
            nodeName: "节点4-1",
            step: 1,
            parentId: "body4",
            isChecked: false,
            editable: false,
            chidrenList: [],
          },
        ],
      },
    ];
    this.myColumns = [
      [
        {
          id: "head1",
          nodeName: "表头1",
          rowSpan: 2,
          colSpan: 1,
        },
        {
          id: "head2",
          nodeName: "表头2",
          rowSpan: 2,
          colSpan: 1,
        },
        {
          id: "head3",
          nodeName: "表头3",
          rowSpan: 2,
          colSpan: 1,
        },
      ],
    ];
    this.myData = [
      {
        id: "body1",
        nodeLevel: 1,
        nodeName: "节点1",
        step: 1,
        parentId: [],
        isChecked: false,
        editable: false,
        chidrenList: [
          {
            id: "body1-1",
            nodeLevel: 2,
            nodeName: "节点1-1",
            step: 1,
            parentId: "body1",
            isChecked: false,
            editable: false,
            chidrenList: [],
          },
          {
            id: "body1-2",
            nodeLevel: 2,
            nodeName: "节点1-2",
            step: 1,
            parentId: "body1",
            isChecked: false,
            editable: false,
            chidrenList: [],
          },
        ],
      },
    ];
    this.permissionList = [
      {
        id: 1,
        nodeName: "后台管理",
        parentId: 0,
        isChecked: false,
        editable: false,
        chidrenList: [
          {
            id: 2,
            nodeName: "设备管理",
            parentId: 1,
            isChecked: false,
            editable: false,
            chidrenList: [
              {
                id: 5,
                nodeName: "查询",
                parentId: 2,
                isChecked: false,
                editable: false,
                chidrenList: [],
              },
              {
                id: 6,
                nodeName: "新增设备",
                parentId: 2,
                isChecked: false,
                editable: false,
                chidrenList: [],
              },
            ],
          },
          {
            id: 3,
            nodeName: "用户管理",
            parentId: 1,
            isChecked: false,
            editable: false,
            chidrenList: [
              {
                id: 11,
                nodeName: "查询",
                parentId: 3,
                isChecked: false,
                editable: false,
                chidrenList: [],
              },
              {
                id: 12,
                nodeName: "新增用户",
                parentId: 3,
                isChecked: false,
                editable: false,
                chidrenList: [],
              },
              {
                id: 13,
                nodeName: "编辑",
                parentId: 3,
                isChecked: false,
                editable: false,
                chidrenList: [],
              },
              {
                id: 14,
                nodeName: "启用",
                parentId: 3,
                isChecked: false,
                editable: false,
                chidrenList: [],
              },
              {
                id: 15,
                nodeName: "禁用",
                parentId: 3,
                isChecked: false,
                editable: false,
                chidrenList: [],
              },
            ],
          },
          {
            id: 4,
            nodeName: "角色管理",
            parentId: 1,
            isChecked: false,
            editable: false,
            chidrenList: [
              {
                id: 16,
                nodeName: "查询",
                parentId: 4,
                isChecked: false,
                editable: false,
                chidrenList: [],
              },
            ],
          },
        ],
      },
      {
        id: 22,
        nodeName: "窗口自助接报",
        parentId: 0,
        isChecked: false,
        editable: false,
        chidrenList: [
          {
            id: 23,
            nodeName: "窗口待办",
            parentId: 22,
            isChecked: false,
            editable: false,
            chidrenList: [
              {
                id: 26,
                nodeName: "查询",
                parentId: 23,
                isChecked: false,
                editable: false,
                chidrenList: [],
              },
              {
                id: 27,
                nodeName: "办理",
                parentId: 23,
                isChecked: false,
                editable: false,
                chidrenList: [],
              },
            ],
          },
          {
            id: 24,
            nodeName: "窗口已办",
            parentId: 22,
            isChecked: false,
            editable: false,
            chidrenList: [
              {
                id: 28,
                nodeName: "查询",
                parentId: 24,
                isChecked: false,
                editable: false,
                chidrenList: [],
              },
              {
                id: 29,
                nodeName: "导出",
                parentId: 24,
                isChecked: false,
                editable: false,
                chidrenList: [],
              },
              {
                id: 30,
                nodeName: "查看办理详情",
                parentId: 24,
                isChecked: false,
                editable: false,
                chidrenList: [],
              },
            ],
          },
          {
            id: 25,
            nodeName: "窗口接报监督管理",
            parentId: 22,
            isChecked: false,
            editable: false,
            chidrenList: [
              {
                id: 31,
                nodeName: "查看",
                parentId: 25,
                isChecked: false,
                editable: false,
                chidrenList: [],
              },
            ],
          },
        ],
      },
    ];
  },
  methods: {
    test() {
      alert(this.permissionIds);
      // alert(this.ids)
      // console.log(this.flatten1(this.permissionIds))
    },
    getPermission(val) {
      // this.permissionIds = val
      let data = this.treeToOneArr(val);
      this.permissionIds = data;
      console.log(data);
      // this.flatten1(this.permissionIds)
    },
    flatten1(tree) {
      let vm = this;
      var arr = [];
      function spread(tree, pid) {
        for (var i = 0; i < tree.length; i++) {
          let item = tree[i];
          let { id, nodeName, isChecked } = item;
          if (isChecked && !vm.ids.includes(id)) {
            vm.ids.push(id);
          }
          arr.push({ id, nodeName, pid, isChecked });
          if (item.chidrenList) {
            spread(item.chidrenList, item.id);
            delete item.chidrenList;
          }
        }
      }
      spread(tree, 0);
      return arr;
    },

    treeToOneArr(arr) {
      // let vm = this
      let ids = [];
      let data = JSON.parse(JSON.stringify(arr)); // 对传入的参数进行深拷贝
      let newData = []; // 创建空数组用来接收操作后的新数组
      const hasChildren = (item) => {
        // 递归遍历，把包含children的选项拿出来，push到之前新建的空数组内
        (item.chidrenList || (item.chidrenList = [])).map((v) => {
          hasChildren(v);
        });
        delete item.chidrenList; // 删除原children属性，可选项
        if (item.isChecked && !ids.includes(item.id)) {
          // vm.permissionIds.push(item.id)
          ids.push(item.id);
        }
        newData.push(item);
      };
      data.map((v) => hasChildren(v));
      return ids;
    },
  },
};
</script>

<style scoped></style>
